<section>
  <div class="row">
    <div class="col-md-12 col-lg-8 pr-0-md">
      <!-- Block Details -->
      <div class="card card-mr-50-md">
        <div class="card-body">
          <h1 class="card-title" data-test="detail_type">
            <%= gettext("%{block_type} Details", block_type: block_type(@block)) %>
          </h1>
          <!-- Block Height -->
          <h3 class="block-detail-number" data-test="block_detail_number" data-toggle="tooltip" data-placement="top"  title="" data-original-title="The block number in which transactions were recorded.">
            <%= if block_type(@block) == "Block" do %>
              <%= gettext("Block Height: %{height}", height: @block.number) %> <%= if @block.number == 0, do: "- " <> gettext("Genesis Block")%>
            <% else %>
              <%= gettext("%{block_type} Height:", block_type: block_type(@block)) %>
              <%= link(@block, to: block_path(BlockScoutWeb.Endpoint, :show, @block.number)) %>
            <% end %>
          </h3>
          <div class="d-flex justify-content-start text-muted block-details-row">
            <!-- # of Transactions -->
            <span class="mr-4 block-detail-el"> <%= gettext "%{count} Transactions", count: @block_transaction_count %> </span>

            <%= if @block.size do %>
            <!-- Block Size -->
              <span class="mr-4 block-detail-el"> <%= Cldr.Unit.new(:byte, @block.size) |> cldr_unit_to_string!() %> </span>
            <% end %>

            <!-- Block Age -->
            <span class="mr-4 block-detail-el" data-from-now="<%= @block.timestamp %>"></span>
          </div>

          <hr>
          <!-- Block details description list -->

          <!-- Block Hash -->
          <dl class="row">
            <dt class="col-sm-3 text-muted"><%= gettext "Hash" %></dt>
            <dd class="col-sm-9"><a class="transaction__link"  data-toggle="tooltip" data-placement="top"  title="" data-original-title="The SHA256 hash of the block."><%= to_string(@block.hash) %></a></dd>
          </dl>

          <%= unless @block.number == 0 do %>
              <!-- Parent Hash -->
              <dl class="row">
                <dt class="col-sm-3 text-muted"><%= gettext "Parent Hash" %></dt>
                <dd class="col-sm-9">
                <span data-toggle="tooltip" data-placement="top"  title="" data-original-title="The SHA256 hash of the parent block." >
                  <%= link(
                      @block.parent_hash,
                      class: "transaction__link",
                      to: block_path(@conn, :show, @block.number - 1)
                    ) %>
                    </span>
                </dd>
              </dl>
          <% end %>

          <!-- Difficulty value -->
          <dl class="row">
            <dt class="col-sm-3 text-muted"><%= gettext "Difficulty" %></dt>
            <dd class="col-sm-9">
              <span data-toggle="tooltip" data-placement="top" title="" data-original-title="Block difficulty for miner, used to calibrate block generation time (Note: constant in POA based networks)."><%= @block.difficulty |> BlockScoutWeb.Cldr.Number.to_string! %></span>
            </dd>
          </dl>

          <%= if block_type(@block) == "Block" do %>
            <!-- Total Difficulty -->
            <dl class="row">
              <dt class="col-sm-3 text-muted"><%= gettext "Total Difficulty" %></dt>
              <dd class="col-sm-9"><span data-toggle="tooltip" data-placement="top" title="" data-original-title="Integer of the total difficulty of the chain until this block."><%= @block.total_difficulty |> BlockScoutWeb.Cldr.Number.to_string! %></span></dd>
            </dl>

            <!-- Nonce -->
            <dl class="row">
              <dt class="col-sm-3 text-muted"><%= gettext "Nonce" %></dt>
              <dd class="col-sm-9"><span data-toggle="tooltip" data-placement="top" title="" data-original-title="64-bit hash of value verifying proof-of-work (note: null for POA chains)."><%= to_string(@block.nonce) %></span></dd>
            </dl>

            <%= if length(@block.uncle_relations) > 0 do %>
              <!-- Uncles -->
              <dl class="row mt-3">
                <dt class="col-sm-3 text-muted"><%= gettext "Uncles" %></dt>
                <dd class="col-sm-9">
                  <%= for {relation, index} <- Enum.with_index(@block.uncle_relations) do %>
                    <%= link(
                        gettext("Position %{index}", index: index),
                        class: "transaction__link",
                        "data-toggle": "tooltip",
                        "data-placement": "top" ,
                        "data-original-title": "Index position(s) of referenced stale blocks." ,
                        "data-test": "uncle_link",
                        "data-uncle-hash": to_string(relation.uncle_hash),
                        to: block_path(@conn, :show, relation.uncle_hash)
                      ) %><%= if index < length(@block.uncle_relations) - 1 do %>,<% end %>
                  <% end %>
                </dd>
              </dl>
            <% end %>

            <!-- Otherwise it will be displayed in its own block -->
            <%= if show_reward?(@block.rewards) do %>
              <dl class="row">
                <dt class="col-sm-3 text-muted"><%= gettext "Gas Used" %></dt>
                <dd class="col-sm-9">
                  <span data-toggle="tooltip" data-placement="top" title="" data-original-title="Total gas used by all transactions in this block (limit)."><%= @block.gas_used |> BlockScoutWeb.Cldr.Number.to_string! %></span>
                  <span class="text-muted" data-toggle="tooltip" data-placement="top" title="" data-original-title="Total gas used by all transactions in this block (% used).">(<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)</span>
                </dt>
              </dl>
              <dl class="row mb-0">
                <dt class="col-sm-3 text-muted"><%= gettext "Gas Limit" %></dt>
                <dd class="col-sm-9">
                  <span data-toggle="tooltip" data-placement="top" title="" data-original-title="The maximum gas allowed in this block."><%= BlockScoutWeb.Cldr.Number.to_string!(@block.gas_limit) %></span>
                </dd>
              </dl>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>

    <div class="col-md-12 col-lg-4 d-flex flex-column flex-md-row flex-lg-column pl-0-md">

      <!-- Validator -->
      <div class="card card-background-1 flex-grow-1">
        <div class="card-body card-body-flex-column-space-between">
          <h2 class="card-title balance-card-title"><%= gettext "Miner" %></h2>
          <div class="text-right tooltipCustom">
            <!-- Validator's Name -->
            <span class="tooltiptextTopMiner"> Validator's Name</span>

            <h3 class="address-balance-text text-truncate" >

              <%= render BlockScoutWeb.AddressView,
                "_link.html",
                address: @block.miner,
                contract: false,
                class: "" %>
            </h3>
          </div>
        </div>
      </div>

      <!-- Validator Reward or Gas-->
      <div class="card flex-grow-1 ml-0 ml-md-5 ml-lg-0">
        <div class="card-body card-body-flex-column-space-between">
          <%= if show_reward?(@block.rewards) do %>
            <h2 class="card-title balance-card-title"><%= gettext "Block Rewards" %></h2>
            <div class="text-right" style="margin-left: 50%;" data-toggle="tooltip" data-placement="top" title="" data-original-title="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees.">
              <%= for block_reward <- @block.rewards do %>
                <p class="address-current-balance"><%= block_reward_text(block_reward) %> <span class="text-muted"><%= format_wei_value(block_reward.reward, :ether) %></span></p>
              <% end %>
            </div>
          <% else %>
            <h2 class="card-title balance-card-title"><%= gettext "Gas Used" %></h2>
            <div class="text-right">
              <h3 class="address-balance-text">
                <%= @block.gas_used |> BlockScoutWeb.Cldr.Number.to_string! %>
                <span class="text-muted">(<%= (Decimal.to_integer(@block.gas_used) / Decimal.to_integer(@block.gas_limit)) |> BlockScoutWeb.Cldr.Number.to_string!(format: "#.#%") %>)</span>
              </h3>
              <p class="address-current-balance"><%= @block.gas_limit |> BlockScoutWeb.Cldr.Number.to_string! %><%= gettext "Gas Limit" %></p>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</section>
